<template>
    <div class="device-maintain-check-detail">
        <device-title
            class="title"
            :devicename="DataList.devicename"
            :manucode="DataList.manufacturecode" />
        <device-check-reader
            v-if="!isShowsubmit"
            :pointinspectioncontents="DataList.pointinspectioncontents" />
        <device-check-write
            v-else
            v-model="DataList.pointinspectioncontents" />
        <div
            class="button-div-fixed"
            v-if="isShowsubmit">
            <van-button
                class="cancle-button"
                @click="backToLastPage"
            >取消</van-button>
            <van-button
                @click="submitDeviceMaintainCheck"
                class="submit-button"
            >提交</van-button>
        </div>
    </div>
</template>

<script>
import { DeviceCheckSetup } from '@/setup/maintaincheckorder/DeviceCheck';
import DeviceTitle from './children/DeviceTitle.vue';
import DeviceCheckReader from './children/DeviceCheckReader.vue';
import DeviceCheckWrite from './children/DeviceCheckWrite.vue';
import { reactive, toRefs } from '@vue/reactivity';
import { useRoute, useRouter } from 'vue-router';
import { getDeviceCheckRecord } from '@/api/server';
import { apiService } from '@/api/apiService.js';
import { onBeforeMount } from '@vue/runtime-core';
import useMaintenanceOrderConfigSetup from '@/setup/maintaincheckorder/MaintaincheckorderActionSetup';
import MaintaincheckorderDetailSetup from '@/setup/maintaincheckorder/MaintaincheckorderDetailSetup';
export default {
    components: { DeviceTitle, DeviceCheckReader, DeviceCheckWrite },
    setup (props) {
        const { setOrderId, queryMaintaincheckorderDetail, maintaincheckorder } = MaintaincheckorderDetailSetup();
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            manufacturecode: route.query.manufacturecode,
            maintainworkorderid: route.query.maintainworkorderid,
            DataList: {},
            orderItem: {}
        });
        onBeforeMount(() => {
            getDataList();
            setOrderId();
            queryMaintaincheckorderDetail((success) => {
                state.orderItem = maintaincheckorder.detail;
            });
        });
        const { isShowsubmit } = useMaintenanceOrderConfigSetup(state);
        const getDataList = () => {
            apiService({
                api: getDeviceCheckRecord,
                param: {
                    manufacturecode: state.manufacturecode,
                    maintainworkorderid: state.maintainworkorderid
                },
                success: (data) => {
                    state.DataList = { ...data.value };
                }
            });
        };
        const { updateDeviceCheckRecord } = DeviceCheckSetup();
        const backToLastPage = () => {
            router.push({
                path: '/maintaincheckorderrecord',
                query: {
                    maintainworkorderid: state.maintainworkorderid
                }
            });
        };
        const submitDeviceMaintainCheck = () => {
            console.log(state.DataList);
            const params = reactive({
                maintainworkorderid: state.maintainworkorderid,
                maintaindevice: {
                    manufacturecode: state.manufacturecode,
                    pointinspectioncontents: state.DataList.pointinspectioncontents
                }

            });
            updateDeviceCheckRecord(params, () => {
                router.push({
                    path: '/maintaincheckorderrecord',
                    query: {
                        maintainworkorderid: state.maintainworkorderid
                    }
                });
            });
        };
        return {
            maintaincheckorder,
            isShowsubmit,
            backToLastPage,
            submitDeviceMaintainCheck,
            ...toRefs(state)
        };
    }

};
</script>

<style lang="scss" scoped>
.device-maintain-check-detail{
    height: 100vh;
    background-color: #F0F0F0;
    .title{
        position:fixed;
        top: 0;
    }
    .button-div-fixed{
        position:fixed;
        height: 53px;
        background-color: white;
        width: 100vw;
        bottom: 0;
        .cancle-button{
            width: calc(50vw - 22.5px - 2.5px);
            height: 40px;
            margin: 7px 0px 6px;
            margin-left: 15px;
            font-size: 18px;
            opacity: 1;
            background: white;
            border-radius: 5px;
            vertical-align: middle;
            font-weight: Normal;
            text-align: CENTER;
            color: black;
        }
        .submit-button{
            width: calc(50vw - 15px - 2.5px);
            height: 40px;
            margin: 7px 0px 6px;
            margin-left: 10px;
            font-size: 18px;
            opacity: 1;
            background: #1890ff;
            border-radius: 5px;
            vertical-align: middle;
            font-weight: Normal;
            text-align: CENTER;
            color: #ffffff;
        }
    }
}
</style>
